<template>
	<view class="contain-main-box">
	<view class="main-bg" :scroll-y="true">
		<navigationTop navigationTitle="烟感详情" :isHome="true" :isBack="true"></navigationTop>
		<view class="smoke-detail">
			<view class="mid-body">
				<view class="text-nor">当前状态</view>
				<view :class="['text-level'+optionData.alarmLevel]" style="text-align: center;">{{deviceStatus(optionData.alarmLevel)}}</view>
				<view class="items-list-wrap">
					<view class="items-list">
						<view class="left-smoke">
							<image :src="$store.state.baseImg + '/icon/yg.png'"></image>
						</view>
						<view class="right-smoke">
							<view class="name">{{infoData.deviceName}}</view>
							<view class="alarm-status">
								告警状态：<text>{{infoData.alarmSmokeStatus}}</text> 
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- tabs组件 -->
		<view class="tabs-content">
			<navTab :tabList="tabList" @changeIndex="changeNav" style="margin-bottom: 30rpx;"></navTab>
		</view>
		<!-- tabs组件 -->
		<!-- 轮播盒子 -->
		<view style="height: 560rpx;">
			<AlarmSwiper :swiperData="swiperData" v-if="refreshSwiper"></AlarmSwiper>
		</view>
		<!-- 轮播盒子 -->
	</view>
	</view>	
</template>

<script>
	import {chooseAlarmLevel,handleSwiperGroup,alarmTabs} from "@/common/utils/index.js";
	import navTab from '@/components/navTab/navTab.vue';
	import AlarmSwiper from "@/components/alarmSwiper/index.vue";
	import navigationTop from "@/components/navigationTop/index.vue";
	export default {
		components:{navTab,AlarmSwiper,navigationTop},
		data() {
			return {
				optionData:{},
				infoData:{},
				navCurrent:'0', //tab 栏的index
				refreshSwiper:true, //是否重置swiper
				swiperGroup:{}, //swiper组
				swiperData:[], //展示的swiper数组
				tabList:alarmTabs(),
				smokeData:[
					{name:"5楼UPS间烟感1",status:3},
					{name:"2楼UPS间烟感2",status:1},
					{name:"3楼UPS间烟感3",status:2}
				]
			}
		},
		onLoad(options) {
			this.optionData = {
				...options
			}
			this.getData(this.optionData)
		},
		computed:{
			deviceStatus(){
				return function(val){
					const name = chooseAlarmLevel(val);
					return name
				}
			}
		},
		methods: {
			changeNav(val){
				this.refreshSwiper = false;
				this.navCurrent = val
				this.swiperData = this.swiperGroup[this.navCurrent];
				this.$nextTick(()=>{
					this.refreshSwiper = true
				})
			},
			handleTab_Swiper(res){
				// 给tab栏赋值
				this.tabList.forEach((item)=>{
					res.data.alarmCount.forEach((its)=>{
						if(item.alarmLevel == its.alarmLevel){
							item['count'] = its.r1
							// item['count'] = 5
						}
					})
				})
				const swiperData = res.data.alarmList;
				const group = {
					"0":[],
					"1":[],
					"2":[],
					"3":[],
					"4":[]
				}
				const swipers = handleSwiperGroup(group,swiperData,'alarmLevel');
				this.swiperGroup = swipers;
				this.swiperData = this.swiperGroup[this.navCurrent];
			},
			getData(data){
				uni.showLoading({
				    title: '加载中',
						mask: false
				});
				this.$http.httpRequest({
					url:this.$api.deviceDetails,
					methods:"get",
					data:data
				}).then((res)=>{
					uni.hideLoading()
					this.infoData = {
						...res.data.deviceDetails
					}
					// 给tab栏赋值
					this.handleTab_Swiper(res)
				}).catch((err)=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabs-content{
	width: $baseWidth;
	margin: 0 auto;
}
.smoke-detail{
	padding: 80rpx 30rpx;
	background: rgba(255,255,255,0.9);
	height: 100%;
}
.mid-body{
	box-shadow: $card-box-shadow;
	border-radius: $card-box-radius;
	min-height: 100%;
	padding: 25rpx;
}
.items-list-wrap{
	margin-top: 30rpx;
}
.text-nor{color:$ky-main-color;text-align: center;}
.text-red{color: $dangerColor;text-align: center;}
.items-list{
	display: flex;
	box-shadow: 0 0 10rpx #ccc;
	// box-shadow: $card-box-shadow;
	border-radius: $card-box-radius;
	padding: 30rpx 120rpx;
	margin-bottom: 30rpx;
}
.left-smoke image{
	width: 62rpx;height: 55rpx;margin-right: 60rpx;margin-top: 20rpx;
}
.right-smoke{
	
}
.right-smoke .name{color: $ky-main-color;margin-bottom: 20rpx;}
.right-smoke .alarm-status{color: $ky-main-color;position: relative;}
.right-smoke .alarm-status::after{
	top: 10rpx;
}
</style>
